﻿@model TestOnlineProject.Models.Entities.DiscussionModel
@{
    ViewBag.Title = "Details";
}
<script>
    tinymce.init({
        menubar: false,
        toolbar: "bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent",
        resize: false,
        statusbar : true,
        height: 200,
        selector : "textarea.mceEditor"
    });

    $(document).ready(function() {
        var discussionId = 0;

        // Delete reply
        $("button[name=DeleteReply]").click(function() {
            discussionId = $(this).attr('value');
            var con = confirm("Are you sure You want to Delete this reply?");
            if (con == true) {
                $.ajax({
                    url: "DeleteReply?replyId=" + discussionId + "&discussionId=" + @Model.Discussion.DiscussionId,
                    success: function(data) {
                        alert(data);
                        window.location.href = window.location.href;
                    }
                });
            }
        });
        
        // Show textarea to Edit discussion
        $("button[name=Edit]").click(function() {
            discussionId = $(this).attr('value');
            $("div[class=edit]").css("display", "none");
            $("div[class=display]").css("display", "block");
            $("div[class=control]").css("display", "block");
            $("#" + discussionId).css("display", "none");
            $("#Content_" + discussionId).css("display", "none");
            $("#Control_" + discussionId).css("display", "none");
            $("#Edit_" + discussionId).css("display", "block");
        });

        // Cancel Edit process
        $("button[name=Cancel]").click(function() {
            discussionId = $(this).attr('value');
            $("#" + discussionId).css("display", "block");
            $("#Content_" + discussionId).css("display", "block");
            $("#Control_" + discussionId).css("display", "block");
            $("#Edit_" + discussionId).css("display", "none");
        });

        // Save discussion after edit
        $("button[name=Save]").click(function() {
            discussionId = $(this).attr('value');
            var content = tinyMCE.activeEditor.getContent();
            if (content == "") {
                alert("Please input content");
            } else {
                var con = confirm("Are you sure you want to change content of discussion?");
                if (con) {
                    $.ajax({
                        url: "Update?discussionId=" + discussionId + "&content=" + escape(content),
                        success: function(data) {
                            alert(data);
                            window.location.href = window.location.href;
                        }
                    });
                }
            }
        });

        $("button[name=Quote]").click(function() {
            discussionId = $(this).attr('value');
            var user = $("#Name_" + discussionId).text();
            var content = $("textarea[name=" + discussionId + "]").val();
            content = "[quote=" + user + "]" + content + "[/quote]";
            var contentOfReply = tinyMCE.activeEditor.getContent();
            tinyMCE.activeEditor.setContent(contentOfReply + content);
        });
        
        $(".vio_report").click(function () {
            $("#vio_msg").css("display", "none");
            $("#report_result").css("display", "none");
            $("#report_content").css("display", "block");
            $("#vio_content").val("");
        });

        $("button[name=Deactivate]").click(function() {
            var val = $(this).attr('value');
            var con = confirm("Are you sure You want to Deactivate this Discussion?");
            if (con == true) {
                $.ajax({
                    url: "@Url.Content("~/Discussion/Deactivate")?ids=" + val + "-",
                    type: 'GET',
                    success: function(result) {
                        if (result != null) {
                            alert(result);
                            window.location = "@Url.Content("~/Discussion/Details")?subjectId=@Model.Subject.SubjectId&discussionId=@Model.Discussion.DiscussionId&thread=" + val;
                        }
                    }
                });
            }
        });
        
        $("button[name=Activate]").click(function() {
            var val = $(this).attr('value');
            var con = confirm("Are you sure You want to Activate this Discussion?");
            if (con == true) {
                $.ajax({
                    url: "@Url.Content("~/Discussion/Activate")?ids=" + val + "-",
                    type: 'GET',
                    success: function(result) {
                        if (result != null) {
                            alert(result);
                            window.location = "@Url.Content("~/Discussion/Details")?subjectId=@Model.Subject.SubjectId&discussionId=@Model.Discussion.DiscussionId&thread=" + val;
                        }
                    }
                });
            }
        });

        $("button[name=Delete]").click(function() {
            var val = $(this).attr('value');
            var con = confirm("Are you sure You want to Delete this Discussion?");
            if (con == true) {
                $.ajax({
                    url: "@Url.Content("~/Discussion/Delete")?ids=" + val + "-",
                    type: 'GET',
                    success: function(result) {
                        if (result != null) {
                            alert(result);
                            window.location = "@Url.Content("~/Discussion/Details")?subjectId=@Model.Subject.SubjectId&discussionId=@Model.Discussion.DiscussionId";
                        }
                    }
                });
            }
        });
    });
    
    function Validate() {
        var vioContent = $("#vio_content").val();
        if (vioContent == "") {
            $("#vio_msg").css("display", "block");
            $("#vio_msg").html("The field content is required.");
            return;
        }
        else if (vioContent != "" && (vioContent.length < 5 || vioContent.length > 500)) {
            $("#vio_msg").css("display", "block");
            $("#vio_msg").html("The field Content must be a string with a minimum length of 5 and a maximum length of 500.");
            return;
        }
        $("#form_violation").submit();
        $("#vio_msg").css("display", "none");
        $("#report_result").css("display", "block");
        $("#report_content").css("display", "none");
    }
    
    function SendReport(id) {
        $("#report_content").html("<input type=\"hidden\" name=\"discussionId\" id=\"vio_discussionId\" /> <div style=\"text-align: center\"> <input type=\"text\" name=\"message\" pattern=\".{5,100}\" required placeholder=\"Message\" title=\"The Message length is 5-100 characters.\" style=\"width: 330px\" /> <button type=\"submit\" value=\"Send\" class=\"btn\"> Send</button> </div>");
        $("#vio_discussionId").val(id);
    }
</script>
<div class="site_map">
    @Html.ActionLink("Home", "Index", "Home", new { Area = "" }, new { })
    / @Html.ActionLink("Subjects", "Index", "Subject", new { }, null)
    / @Html.ActionLink((string) @ViewBag.Subject.Code, "Details", "Subject", new { id = @ViewBag.Subject.SubjectId }, null)
    / @Html.ActionLink("Discussions", "Index", "Discussion", new { subjectId = @ViewBag.Subject.SubjectId }, null)
    / @Model.Discussion.Title
</div>
<br />
<div class="main_nav">
    <span><a href="@Url.Content("~/Discussion/Index")?subjectId=@ViewBag.Subject.SubjectId">
        <img src="@Url.Content("~/Images/back button.png")" />
    </a></span>
</div>
<br />
<div>
    @{
        if (!Model.Discussion.IsActivated)
        {
        <div class="alert alert-error">
            <span>Deactivated.</span>
        </div>
        }
    }
    <div style="font-size: 18px; padding-bottom: 10px;">
        <b>@Model.Discussion.Title</b>
    </div>
    <table class="table table-bordered" id="Table_@Model.Discussion.DiscussionId" style="border: none">
        <tr>
            <td style="width: 124px; border-left: none; border-top: 1px solid #D7EDFC">
                <div style="background: #D7EDFC; border: 1px solid #D7EDFC; border-radius: 5px">
                    <div class="avatar" style="background-color: #F0F7FC; padding: 10px; border-radius: 4px">
                        <a href="@Url.Content("~/Account/Index")?userId=@Model.User.UserId" target="_blank">
                            @if (@Model.User.ImageUrl == null)
                            {
                                <img alt="@Model.User.Username" src="~/Images/default_large.png" style="width: 96px; height: 96px" />
                            }
                            else
                            {
                                <img alt="@Model.User.Username" src="~/Images/Profile/@Model.User.ImageUrl" style="width: 96px; height: 96px" />
                            }
                        </a>
                    </div>
                    <div class="userText" style="padding: 6px">
                        <a href="@Url.Content("~/Account/Index")?userId=@Model.User.UserId" target="_blank">
                            <span>@Model.User.FullName</span> </a>
                        <br />
                        <em>@Model.User.Role.Name</em>
                    </div>
                    <div class="extraUserInfo" style="font-size: 11px; background-color: #f0f7fc; padding: 4px 6px">
                        <span>Posts:</span>
                        <br />
                        <span>@Model.User.Discussions.Count</span>
                    </div>
                </div>
            </td>
            <td style="border-left: none; border-top: 1px solid #D7EDFC">
                <div>
                    <div style="color: #127BC0; padding-bottom: 10px">
                        @if (HttpContext.Current.User.IsInRole("1"))
                        {
                            <span class="btn-group" style="float: right">
                                <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                                    <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu pull-right">
                                    @if (Model.Discussion.IsActivated)
                                    {
                                        <li>
                                            <button class="btn btn-link" name="Deactivate" value="@Model.Discussion.DiscussionId">Deactivate</button>
                                        </li>
                                    }
                                    else
                                    {
                                        <li>
                                            <button class="btn btn-link" name="Activate" value="@Model.Discussion.DiscussionId">Activate</button>
                                        </li>
                                    }
                                    <li>
                                        <button class="btn btn-link" name="Delete" value="@Model.Discussion.DiscussionId">Delete</button>
                                    </li>
                                </ul>
                            </span>
                        }
                    </div>
                    <div id="Content_@Model.Discussion.DiscussionId" style="word-break: break-all">
                        @Html.Raw(@Model.Discussion.Content)
                    </div>
                    <div id="Edit_@Model.Discussion.DiscussionId" style="display: none" class="edit">
                        <textarea class="mceEditor" name="@Model.Discussion.DiscussionId" rows="" cols="">@Model.Discussion.Content</textarea>
                        <div style="text-align: right; margin-top: 5px">
                            <button class="btn btn-small" name="Save" value="@Model.Discussion.DiscussionId">Save</button>
                            <button class="btn btn-small" name="Cancel" value="@Model.Discussion.DiscussionId">Cancel</button>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        @if (Model.Discussion.IsActivated)
        {
            <tr>
                <td style="border: none">
                </td>
                <td style="border: none; border-top: 1px dashed #D7EDFC">
                    <div style="float: left; margin-right: 10px">
                        <span style="color: rgb(150, 150, 150)">
                            <a href="@Url.Content("~/Account/Index")?userId=@Model.User.UserId" target="_blank" style="color: rgb(150, 150, 150)">
                                      @Model.User.FullName
                                  </a>, @Model.Discussion.LastEditedTime.ToShortDateString()
                        </span>
                    </div>
                    <div id="Control_@Model.Discussion.DiscussionId" class="control">
                        @if (Model.User.UserId == Int32.Parse(HttpContext.Current.User.Identity.Name))
                        {
                            <div style="float: right">
                                <span style="padding-right: 10px">
                                    <button class="btn btn-small" name="Edit" value="@Model.Discussion.DiscussionId">Edit</button>
                                </span>
                            </div>
                        }
                        else
                        {
                            <div>
                                <span>
                                    <a href="#myModal" role="button" data-toggle="modal" class="vio_report" onclick="SendReport('@Model.Discussion.DiscussionId')">
                                        <img src="@Url.Content("~/Images/report.gif")" alt="Report" title="Report"/>
                                    </a>
                                </span>
                            </div>
                        }
                    </div>
                </td>
            </tr>
        }
        else
        {
            if (HttpContext.Current.User.IsInRole("1"))
            {
                <tr>
                    <td style="border: none">
                    </td>
                    <td style="border: none; border-top: 1px dashed #D7EDFC">
                        <div style="float: left; margin-right: 10px">
                            <span style="color: rgb(150, 150, 150)">
                                <a href="@Url.Content("~/Account/Index")?userId=@Model.User.UserId" target="_blank" style="color: rgb(150, 150, 150)">
                                    @Model.User.FullName
                                </a>, @Model.Discussion.LastEditedTime.ToShortDateString()
                            </span>
                        </div>
                        <div id="Control_@Model.Discussion.DiscussionId" class="control">
                            @if (Model.User.UserId == Int32.Parse(HttpContext.Current.User.Identity.Name))
                            {
                                <div style="float: right">
                                    <span style="padding-right: 10px">
                                        <button class="btn btn-small" name="Edit" value="@Model.Discussion.DiscussionId">Edit</button>
                                    </span>
                                </div>
                            }
                            else
                            {
                                <div>
                                    <span>
                                        <a href="#myModal" role="button" data-toggle="modal" class="vio_report" onclick="SendReport('@Model.Discussion.DiscussionId')">
                                            <img src="@Url.Content("~/Images/report.gif")" alt="Report" title="Report"/>
                                        </a>
                                    </span>
                                </div>
                            }
                        </div>
                    </td>
                </tr>
            }
        }
    </table>
    @if (@Model.OnTop)
    {
        <script>
            $('html, body').animate({
                scrollTop: $("table[id=Table_" + @Model.Discussion.DiscussionId + "]").offset().top
            }, 'slow');
        </script>
    }
    @if (Model.Replies.Count > 0)
    {
        foreach (var item in Model.Replies)
        {
        <table id="Table_@item.Discussion.DiscussionId" class="table table-bordered" style="border: none">
            <tr>
                <td style="width: 124px; border-left: none; border-top: 1px solid #D7EDFC">
                    <div style="background: #D7EDFC; border: 1px solid #D7EDFC; border-radius: 5px">
                        <div class="avatar" style="background-color: #F0F7FC; padding: 10px; border-radius: 4px">
                            <a href="@Url.Content("~/Account/Index")?userId=@item.User.UserId" target="_blank">
                                @if (@item.User.ImageUrl == null)
                                {
                                    <img alt="@item.User.Username" src="~/Images/default_large.png" style="width: 96px; height: 96px" />
                                }
                                else
                                {
                                    <img alt="@item.User.Username" src="~/Images/Profile/@item.User.ImageUrl" style="width: 96px; height: 96px" />
                                }
                            </a>
                        </div>
                        <div class="userText" style="padding: 6px">
                            <a href="@Url.Content("~/Account/Index")?userId=@item.User.UserId" target="_blank"><span>@item.User.FullName</span></a>
                            <br />
                            <em>@item.User.Role.Name</em>
                        </div>
                        <div class="extraUserInfo" style="font-size: 11px; background-color: #f0f7fc; padding: 4px 6px">
                            <span>Posts:</span>
                            <br />
                            <span>@item.User.Discussions.Count</span>
                        </div>
                    </div>
                </td>
                <td style="border-left: none; border-top: 1px solid #D7EDFC">
                    <div>
                        <div style="color: #127BC0; padding-bottom: 10px">
                            @if (HttpContext.Current.User.IsInRole("1"))
                            {
                                <span class="btn-group" style="float: right">
                                    <a class="btn btn-small dropdown-toggle"data-toggle="dropdown" href="#">
                                        <span class="caret"></span>
                                    </a>
                                    <ul class="dropdown-menu pull-right">
                                        @if (item.Discussion.IsActivated)
                                        {
                                            <li>
                                                <button class="btn btn-link" name="Deactivate" value="@item.Discussion.DiscussionId">Deactivate</button>
                                            </li>
                                        }
                                        else
                                        {
                                            <li>
                                                <button class="btn btn-link" name="Activate" value="@item.Discussion.DiscussionId">Activate</button>
                                            </li>
                                        }
                                        <li>
                                            <button class="btn btn-link" name="Edit" value="@item.Discussion.DiscussionId">Edit</button>
                                        </li>
                                        <li>
                                            <button class="btn btn-link" name="DeleteReply" value="@item.Discussion.DiscussionId">Delete</button>
                                        </li>
                                    </ul>
                                </span>
                            }
                        </div>
                        @if (item.Discussion.IsActivated)
                        {
                            <div id="Content_@item.Discussion.DiscussionId" style="word-break: break-all">
                                @Html.Raw(@item.Discussion.Content)
                            </div>
                            <div id="Edit_@item.Discussion.DiscussionId" style="display: none" class="edit">
                                <textarea class="mceEditor" name="@item.Discussion.DiscussionId" rows="" cols="">@item.Discussion.Content</textarea>
                                <div style="text-align: right; margin-top: 5px">
                                    <button class="btn btn-small" name="Save" value="@item.Discussion.DiscussionId">Save</button>
                                    <button class="btn btn-small" name="Cancel" value="@item.Discussion.DiscussionId">Cancel</button>
                                </div>
                            </div>
                        }
                        else
                        {
                            <div class="alert alert-error">
                                <span>Deactivated.</span>
                            </div>
                            if(HttpContext.Current.User.IsInRole("1"))
                            {
                                <div id="Content_@item.Discussion.DiscussionId" style="word-break: break-all">
                                    @Html.Raw(@item.Discussion.Content)
                                </div>
                            }
                        }
                    </div>
                </td>
            </tr>
            @if (Model.Discussion.IsActivated)
            {
                if (item.Discussion.IsActivated)
                {
                <tr>
                    <td style="border: none">
                    </td>
                    <td style="border: none; border-top: 1px dashed #D7EDFC">
                        <div style="float: left; margin-right: 10px">
                            <span style="color: rgb(150, 150, 150)"><a href="@Url.Content("~/Account/Index")?userId=@item.User.UserId" target="_blank" style="color: rgb(150, 150, 150)">
                                @item.User.FullName
                            </a>, @item.Discussion.LastEditedTime.ToShortDateString()
                            </span>
                        </div>
                        <div id="Control_@item.Discussion.DiscussionId" class="control">
                            @if (item.User.UserId == Int32.Parse(HttpContext.Current.User.Identity.Name))
                            {
                                <div style="float: right">
                                    <span style="padding-right: 10px">
                                        <button class="btn btn-small" name="Edit" value="@item.Discussion.DiscussionId">Edit</button>
                                    </span>
                                </div>
                            }
                            else
                            {
                                <div>
                                    <span>
                                        <a href="#myModal" role="button" data-toggle="modal" class="vio_report" onclick="SendReport('@item.Discussion.DiscussionId')">
                                            <img src="@Url.Content("~/Images/report.gif")" alt="Report" title="Report"/>
                                        </a>
                                    </span>
                                </div>
                            }
                        </div>
                    </td>
                </tr>
                }
            }
        </table>
            if (@item.OnTop)
            {
        <script>
                    $('html, body').animate({
                        scrollTop: $("table[id=Table_" + @item.Discussion.DiscussionId + "]").offset().top
                    }, 'slow');
        </script>
            }
        }
    }
    <div>
        @if (ViewBag.Error != null)
        {
            <script>
                window.alert("@ViewBag.Error");
            </script>
        }
        @if (Model.Discussion.IsActivated)
        {
            using (Html.BeginForm())
            {
            @Html.HiddenFor(x => x.Discussion.DiscussionId)
            @Html.HiddenFor(x => x.Subject.SubjectId)
            @Html.HiddenFor(x => x.Discussion.Title)
            <table class="table table-bordered" style="border: none">
                <tr>
                    <td style="width: 124px; border-left: none; border-top: 1px solid #D7EDFC">
                        <div style="background: #D7EDFC; border: 1px solid #D7EDFC; border-radius: 5px">
                            <div class="avatar" style="background-color: #F0F7FC; padding: 10px; border-radius: 4px">
                                <a href="@Url.Content("~/Account/Index")?userId=@ViewBag.User.UserId" target="_blank">
                                    @if (@ViewBag.User.ImageUrl == null)
                                    {
                                        <img alt="@ViewBag.User.Username" src="~/Images/default_large.png" style="width: 96px; height: 96px" />
                                    }
                                    else
                                    {
                                        <img alt="@ViewBag.User.Username" src="~/Images/Profile/@ViewBag.User.ImageUrl" style="width: 96px; height: 96px" />
                                    }
                                </a>
                            </div>
                        </div>
                    </td>
                    <td style="border-left: none; border-top: 1px solid #D7EDFC">
                        <div>
                            <textarea id="reply" class="mceEditor" name="textarea" rows="" cols=""></textarea>
                        </div>
                    </td>
                </tr>
            </table>
            <div style="text-align: center; padding-top: 10px">
                <button type="submit" class="btn" value="Send reply">
                    Send reply</button>
            </div>
            }
        }
    </div>
</div>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 id="myModalLabel">
            Report</h3>
    </div>
    <div class="modal-body">
        @using (Ajax.BeginForm("Create", "Report", null, new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "GET",
            UpdateTargetId = "report_content",
        }, new
        {
            @class = "form-inline",
            id = "form_violation"
        }))
        {
            <div id="report_content">
                <input type="hidden" name="discussionId" id="vio_discussionId" />
                <div style="text-align: center">
                    <input type="text" name="message" pattern=".{5,100}" required placeholder="Message"
                        title="The Message length is 5-100 characters." style="width: 330px" />
                    <button type="submit" value="Send" class="btn">
                        Send</button>
                </div>
            </div>
        }
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">
            Close</button>
    </div>
</div>
